<template>
	<view class="container">
		<view class="wal_det">
			<view class="info_bg"></view>
			<view class="det_list">
				<view class="det_item">
					<view class="det_tit">手机号：</view>
					<view class="det_see" style="width: 30vw;">{{info.username}}</view>
					<!-- <view class="cuIcon-right"></view> -->
				</view>				
				<view class="det_item" v-for="(item, index) in funcList" :key="index" >
					<view class="det_tit">{{ item.name }}</view>
					<view class="det_see" @click="toChange(item.url)">去修改</view>
					<view class="cuIcon-right" @click="toChange(item.url)"></view>
				</view>
			</view>
		</view>
		
		<view class="btn_list">
			<view class="btn recharge" @click="dologout">退出登录</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:[],
				funcList:[{
					name: '修改用户昵称',
					url: '/pages/user/updateuserinfo'
				},{
					name: '登录密码修改',
					url: '/pages/user/repasswd?type=login'
				}, {
					name: '提现密码修改',
					url: '/pages/user/repasswd?type=pay'
				},{
					name: '银行卡管理',
					url: '/pages/bank/index'
				},{
					name: '收货地址管理',
					url: '/pages/address/index'
				}
				]
			};
		},
		onLoad: function (option) {
			this.info = uni.getStorageSync("userinfo");
			//console.log(info.username)
		},
		methods: {
			clearCache:function(e){
				uni.showModal({
					title: "提示",
					content: "是否删除缓存？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.clearStorageSync();
						}
					}
				})
			},
			dologout:function(e){
				uni.showModal({
					title: "提示",
					content: "确认退出？",
					showCancel: true,
					confirmText: "确定",
					success:function(res){
						if(res.confirm){
							uni.clearStorageSync('userinfo');
							uni.reLaunch({
								url:"../login/login"
							})
						}
					}
				})
			},
			//链接
			toUrl:function(e){
				uni.navigateTo({
					url: e,
				});	
			},
			toChange: function(url){
				uni.navigateTo({
					url: url,
				});	
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #0D1A44;
	}
	.wal_det{
		position: relative;
		width: 92vw;
		min-height: 96vw;
		margin: 4vw;
		
		.info_bg{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background-color: #0ca0de;
			opacity: 0.3;
			border-radius:10px;
			z-index: 1;
		}
		
		.det_list{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 2;
			
			.det_item{
				height: 16vw;
				color: #fff;
				font-size: 16px;
				display: flex;
				margin: 0 4vw;
				border-bottom: 0.5px solid #EEE;
				
				.det_tit{
					width: 70vw;
					line-height: 16vw;
					font-size: 15px;
				}
				.det_see{
					width: 14vw;
					line-height: 16vw;
					font-size: 14px;
				}
				.cuIcon-right{
					line-height: 16vw;
				}
			}
			.det_item:last-child{
				border: none;
			}
		}
	}
	
	.btn_list{
		width: 100vw;
		.btn{
			width: 70vw;
			height: 12vw;
			line-height: 12vw;
			text-align: center;
			color:#fff;
			font-size: 16px;
			border-radius: 6vw;
			border:1px solid #5992D7;
			margin: 8vw 15vw; 
			// font-weight: bold;
		}
		.draw{
			color:#5992D7;
			background: #f9f9f9;
		}
		.recharge{
			background: linear-gradient( 180deg, #50A7FF 0%, #3267FF 100%);
		}
	}
</style>
